<template>
	<view class="order-box">
		<view class="nav">
			<view class="tab">
				<view class="item" @tap="tab(1)" :class="actInx ==1 ?'active':''">
					彩绘甲
				</view>
				<!-- <view class="item" @tap="tab(2)" :class="actInx ==2 ?'active':''">
					穿戴甲
				</view> -->
				<view class="item" @tap="tab(3)" :class="actInx ==3 ?'active':''">
					商品
				</view>
			</view>
		</view>
		<!-- <scroll-view :style="{height:scrollH+'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="loadMoreImages"> -->
			<!--彩绘甲-->
			<view class="dy-order-list" v-if="actInx ==1">
				<view class="item" v-for="item in listData" :key="item.id">
					<view class="top" @tap="goDetail(item)">
						<image lazy-load :lazy-load-margin="0" :src="item.subjectRenderingPic" class="img"></image>
						<view class="r">
							{{item.subjectTitle || ''}}
							<view class="price">
								<text  class="t">￥</text>{{item.payAmount || ''}}
							</view>
						</view>
						<!-- 3 未打印 4 打印完成 -->
						<!-- <view class="right-state" v-if="item.orderStatus == 3">
							未打印
						</view> -->
						<view class="right-state done" v-if="item.orderStatus == 4">
							已完成
						</view>
					</view>
					<view class="desc">
						<text class="time">{{item.createTime || ''}}</text>
						<view class="e-right">
							<!-- <button class="share" type="default" data-name="shareBtn" open-type="share" @tap="shareFn(item)">
								<image src="../../static/share.png" class="icon" mode=""></image> 分享
							</button>
							<view class="scan" @tap="scanCode(item)" v-if="item.orderStatus == 3">
								<image src="../../static/scan.png" class="icon" mode=""></image> 扫码打印
							</view> -->
							<view class="scan" @tap="goUrl(item)" v-if="item.orderStatus == 4">
								<image src="../../static/scan.png" class="icon" mode=""></image> 秀自己
							</view>
						</view>
					</view>
				</view>
				<empty @reload="getList" v-if="listData.length < 1"/>
			</view>
			<!--穿戴甲-->
			<view class="my-order-list" v-if="actInx ==2">
				<view class="item" v-for="item in listData" :key="item.id" @tap="goDetail(item)">
					<view class="top">
						<image lazy-load :lazy-load-margin="0" :src="item.goodsImg" class="img"></image>
						<view class="r">
							{{item.goodsName || ''}} <text class="x">X{{item.goodsCount || ''}}</text>
							<view class="price">
								<text class="t">￥</text>{{item.payAmount || ''}}
							</view>
							<view class="time">{{item.createTime || ''}} <text class="zt" :class="{'error-color':(item.goodsOrderStatus == 1 || item.goodsOrderStatus == 2 || item.goodsOrderStatus == 9),'success-color':item.goodsOrderStatus == 7 || item.goodsOrderStatus == 8}" v-for="s in goodsState" :key="s.id">{{s.id == item.goodsOrderStatus ? s.name:''}}</text></view>
						</view>
					</view>
				</view>
				<empty @reload="getList" v-if="listData.length < 1"/>
			</view>
			<!--商品-->
			<view class="my-order-list" v-if="actInx ==3">
				<view class="item" v-for="item in listData" :key="item.id" @tap="goDetail(item)">
					<view class="top">
						<view class="img" v-if="item.goodsInfos">
							<image lazy-load :lazy-load-margin="0" :src="url.goodsImg" v-for="(url,index) in item.goodsInfos" :key="index" class="mr" :class="{'a':item.goodsInfos.length == 2,'b':item.goodsInfos.length == 3,'c':item.goodsInfos.length == 4}"></image>
						</view>
						<view class="r">
							{{item.goodsName || ''}} <text class="x">X{{item.goodsCount || ''}}</text>
							<view class="price">
								<text class="t">￥</text>{{item.payAmount || ''}}
							</view>
							<view class="time">{{item.createTime || ''}} <text class="zt" :class="{'error-color':(item.goodsOrderStatus == 1 || item.goodsOrderStatus == 2 || item.goodsOrderStatus == 9),'success-color':item.goodsOrderStatus == 7 || item.goodsOrderStatus == 8}" v-for="s in goodsState" :key="s.id">{{s.id == item.goodsOrderStatus ? s.name:''}}</text></view>
						</view>
					</view>
				</view>
				<empty @reload="getList" v-if="listData.length < 1"/>
			</view>
		<!-- </scroll-view> -->
		<!-- // 在 manifest.json 的 App SDK 配置里，勾选微信消息及朋友圈并填写相关微信 appkey -->
		<Tabbar :current="1"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabBar.vue'
	import empty from "@/components/empty.vue";
	import share from '@/utils/share.js'
	import {getSharePrintOrder,getGoodsOrderList,getPrintOrderList,getCodePrintOrder,queryMyGoodsOrderList} from '@/api/order.js'
	export default {
		mixins:[share],
		components:{
			Tabbar,
			empty
		},
		data() {
			return {
				actInx: 1,
				listData: [],
				goodsState:[{
					name: '待支付',
					id: 1
				},{
					name: '支付失败',
					id: 2
				},{
					name: '待发货',
					id: 3
				},{
					name: '已打包',
					id: 4
				},{
					name: '已发货',
					id: 5
				},{
					name: '配送中',
					id: 6
				},{
					name: '已签收',
					id: 7
				},{
					name: '退款成功',
					id: 8
				},{
					name: '退款失败',
					id: 9
				},{
					name: '退款处理中',
					id: 10
				}],
				printState:[
					{
						name: '待支付',
						id: 1
					},{
						name: '支付失败',
						id: 2
					},{
						name: '待打印',
						id: 3
					},{
						name: '打印完成',
						id: 4
					},{
						name: '退款处理中',
						id: 5
					},{
						name: '退款完成',
						id: 6
					},{
						name: '退款失败',
						id: 7
					},{
						name: '打印未完成',
						id: 8
					}
				]
			};
		},
		onLaunch() {
			//隐藏官方的tabBar
			uni.hideTabBar()
		},
		onLoad(ops) {
			if(uni.getStorageSync('token')){
				this.getPrintList()
			}else{
				let page = '/pages/pageOrder/orderList?id=' + ops.id
				uni.reLaunch({
					url: '/pagesC/login/login?back=' + page
				})
			}
		},
		computed:{
			scrollH:function(){
				let sys = uni.getSystemInfoSync();
				let winWidth = sys.windowWidth;
				let winrate = 750/winWidth;
				let winHeight = parseInt(sys.windowHeight*winrate) - 288
				return winHeight	
			},
		},
		methods:{
			imgCss(item){
				// let str
				// switch (item.goodsInfos.length){
				// 	case 1:
				// 		str = 'width:200rpx;height:200rpx;'
				// 		break;
				// 	case 2:
				// 		str = 'width:100rpx;height:200rpx;'
				// 		break;
				// 	case 3:
				// 		str = 'width:66.6rpx;height:200rpx;'
				// 		break;
				// 	case 4:
				// 		str = 'width:50rpx;height:50rpx;'
				// 		break;
				// 	default:
				// 		break;
				// }
				return ''
			},
			orderStatus(id){
				let str = ''
				this.printState.forEach(ele =>{
					if(ele.id == id) {
						str = ele.name
					}
				})
				return str
			},
			shareFn(item){
				console.log('分享')
				this.orderIds = item.id
				this.shareTitle = item.subjectTitle
				this.imageUrl = item.subjectRenderingPic
			},
			tab(t){
				this.actInx = t
				
				if(t==1){
					this.getPrintList()
				}
				if(t==2){
					this.getGoodsList()
				}
				if(t==3){
					this.getCommodity()
				}
			},
			goUrl(item){
				uni.navigateTo({
					url: '/pagesC/my/showYourSelf?id='+item.id +'&subjectld='+item.subjectId
				})
			},
			// 跳转详情
			goDetail(ops){
				if(this.actInx==2){
					uni.navigateTo({
						url:'/pagesB/order/goodsOrderDetail?id='+ops.id
					})
				}
				else if(this.actInx==3){
					uni.navigateTo({
						url:'/pagesB/order/commodityOrderDetail?id='+ops.id
					})
				}else{
					let url = '/pagesB/order/printOrderDetail?id='+ops.id
					uni.navigateTo({
						url
					})
				}
			},
			// 彩绘甲
			getPrintList(){
				getPrintOrderList().then((res) =>{
					this.listData = res
				})
			},
			// 穿戴甲
			getGoodsList(){
				getGoodsOrderList().then((res) =>{
					this.listData = res
				})
			},
			// 商品
			getCommodity(){
				console.log('0000000')
				queryMyGoodsOrderList().then((res) =>{
					this.listData = res
				})
			},
			scanCode(item) {
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						console.log(res);
						if (res.result) {
							const terminalCode = res.result;
							console.log('scanCode',terminalCode)
							getCodePrintOrder({orderId:item.id,orderType: 1,terminalCode:terminalCode}).then((res) => {
								uni.showToast({
									title: '打印请求已发送',
									icon: 'none'
								})
								this.getPrintList()
							})
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码');
					}
				})
			},
			// 对扫码后，得到的url地址参数的处理。
			parseUrl(url) {
				let pattern = /(\w+)=([0-9a-zA-Z\u4e00-\u9fa5]+)/ig;
				let parames = {};
				url.replace(pattern, function(a, b, c) {
					parames[b] = c;
				});
				return parames;// 返回一个参数名：参数值 的对象。
			},
			onPullDownRefresh() {
				this.tab(this.actInx)
				uni.stopPullDownRefresh()
			},
			// 加载更多图片
			loadMoreImages() {
				console.log('加载更多图片')
			},
		}
	}
</script>

<style lang="less" scoped>
	@bg: #EB8DA7;
	.scroll-Y{
		margin-top: 32rpx;
	}
	.order-box{
		padding-top: 32rpx;
		margin: 0 26rpx;
		padding-bottom: 150rpx;
		.nav{
			// position: fixed;
			// width: 100%;
			// z-index: 9;
			// background: #f3ecef;
			// padding-top: 32rpx;
		}
		.tab{
			border-radius: 81rpx;
			background: #E4919D;
			height: 90rpx;
			color: #fff;
			display: flex;
			// margin: 0 26rpx;
			.item{
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				border-radius: 81rpx;
				margin: 5rpx;
				line-height: 88rpx;
				text-align: center;
			}
			.active{
				color: #333;
				background: #fff;
			}
		}
		
		.dy-order-list{
			// padding-top: 152rpx;
			// margin: 0 26rpx;
			margin-top: 32rpx;
			.item{
				// height: 280rpx;
				border-radius: 24rpx;
				background-color: #fff;
				padding: 32rpx;
				padding-right: 20rpx;
				margin-bottom: 32rpx;
			}
			.top{
				display: flex;
				position: relative;
				.img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					margin-right: 16rpx;
				}
				
				.r{
					font-size: 30rpx;
					color: #333;
					.price{
						color: #666;
						margin-top: 24rpx;
					}
					.t{
						font-size: 22rpx;
					}
				}
				.right-state{
					position: absolute;
					right: -22rpx;
					top: -32rpx;
					width: 92rpx;
					height: 44rpx;
					border-radius: 0px 24rpx 0px 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background: #F8D48A;
					font-family: PingFangSC-Medium;
					font-size: 20rpx;
					color: #fff;
				}
				.done{
					background: #AAAAAA;
				}
			}
			.desc{
				margin-top: 12rpx;
				display: flex;
				align-items: center;
				.time{
					font-size: 24rpx;
					color: #AAAAAA;
					flex: 1;
				}
				.icon{
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
					position: relative;
					top: 8rpx;
				}
				.share{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: 144rpx;
					min-height: 1rpx;
					border-radius: 32rpx;
					box-sizing: border-box;
					border: 2rpx solid @bg;
					background-color: #fff !important;
					font-size: 28rpx;
					color: @bg;
					// margin-left: 26rpx;
					margin-right: 24rpx;
					display: inline-block;
					text-align: center;
					line-height: normal;
					padding: 10rpx 15rpx;
					padding-bottom: 13rpx;
				}
				.scan{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: 200rpx;
					// height: 64rpx;
					min-height: 1rpx;
					border-radius: 32rpx;
					box-sizing: border-box;
					background-color: @bg;
					border: 2rpx solid @bg;
					font-size: 28rpx;
					color: #fff;
					display: inline-block;
					text-align: center;
					line-height: normal;
					padding: 10rpx 15rpx;
					padding-bottom: 13rpx;
				}
				.e-right{
					text-align: right;
					display: flex;
					margin-left: 25rpx;
				}
			}
		}
		
		.my-order-list{
			// padding-top: 152rpx;
			// margin: 0 26rpx;
			
			margin-top: 32rpx;
			.item{
				// height: 280rpx;
				border-radius: 24rpx;
				background-color: #fff;
				padding: 32rpx;
				margin-bottom: 32rpx;
			}
			.top{
				display: flex;
				position: relative;
				.img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					margin-right: 36rpx;
				}
				.mr{
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
				}
				.a{
					width: 100rpx;
					height: 100rpx;
					margin-top: 60rpx;
				}
				
				.b{
					width: 100rpx;
					height: 100rpx;
				}
				.b:nth-child(1){
					display: block;
					margin: 0 auto;
				}
				.c{
					width: 100rpx;
					height: 100rpx;
				}
				.r{
					font-size: 30rpx;
					color: #333;
					padding-top: 10rpx;
					flex: 1;
					.x{
						color: #666666;
						float: right;
					}
					.price{
						color: #E4919D;
						margin-top: 46rpx;
						font-size: 36rpx;
					}
					.t{
						font-size: 22rpx;
					}
					.time{
						color: #AAAAAA;
						font-size: 28rpx;
						padding-top: 12rpx;
						.zt{
							float: right;
							color: #666;
						}
						.red{
							color: red;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>
